<template>
  <div class="photoinfo-container">
    <h3>{{ photoinfo.title }}</h3>
    <div class="subtitle">
      <span>发表时间：{{ photoinfo.add_time | dateFormat }}</span>
      <span>点击：{{ photoinfo.click }}次</span>
    </div>
    <hr />
    <!--缩略图-->
    <div class="thumbs">
      <vue-preview :slides="list" class="imgPrev"></vue-preview>
    </div>
    <!--图片内容区-->
    <div class="content" v-html="photoinfo.content"></div>
    <!--评论子组件-->
    <comment-box :id="this.id"></comment-box>
  </div>
</template>
<script>
  import { Toast } from 'mint-ui'
  //导入评论子组件
  import comment from '../subcomponents/comment.vue'
  export default {
    data() {
      return {
        id: this.$route.params.id,
        photoinfo: [],
        list: [], //缩略图数组
      }
    },
    created() {
      this.getPhotoInfo()
      this.getThumbs()
    },
    methods: {
      getPhotoInfo() {
        //获取图片详情
        this.$axios.get('./json/imginfo.json').then((result) => {
          if (result.data.status === 0) {
            //成功，把数据保存到data上
            var messageList = result.data.message //获取所有新闻列表
            var index = messageList.findIndex((item) => {
              //获取id对应的对象序号
              if (item.id == this.id) {
                return true
              }
            })
            this.photoinfo = messageList[index]
          } else {
            Toast('获取图片详细信息失败！')
          }
        })
      },
      getThumbs() {
        //获取缩略图
        this.$axios.get('./json/thumimages.json').then((result) => {
          if (result.data.status === 0) {
            //成功，循环每个图片数据，补全图片的宽和高
            result.data.message.forEach((item) => {
              var Iwidth = 200
              var Iheight = 600
              var img = new Image()
              img.src = item.src
              var bili = item.width / item.height
              bili > 1 / 3
                ? (Iheight = (Iwidth * img.height) / img.width)
                : (Iwidth = (Iheight * img.width) / img.height)
              item.w = Iwidth
              item.h = Iheight
              //item.msrc = item.src
              item.src = item.src //大图
              item.msrc = item.src //小图
            })
            this.list = result.data.message
          } else {
            Toast('获取图片详细信息失败！')
          }
        })
      },
    },
    components: {
      //用来注册子组件的节点
      'comment-box': comment,
    },
  }
</script>
<style lang="less">
  .photoinfo-container {
    padding: 10px;
    padding-top: 0px;
    h3 {
      color: #26a2ff;
      font-size: 14px;
      text-align: center;
      margin: 15px 0;
    }
    .subtitle {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
    }

    .content {
      font-size: 12px;
      line-height: 25px;
    }
    .thumbs {
      .imgPrev {
        .my-gallery {
          figure {
            display: inline-block;
            margin: 8px;
          }
          img {
            height: 60px;
          }
        }
      }
    }
  }
</style>